import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: "inspection-mgmt",
    styleUrls: ['./components.less'],
    template: `
        <div class='inspectionMgmtContainer'>
            <div class='inspection-mgmt-bar'>
                <span>计划名称   ：</span>
                <input nz-input  nzPlaceHolder="请输入"  [ngModel]='input_val' />
                <button nz-button nzType="primary">查询</button>
                <button nz-button nzType="primary" (click)="isVisible = true">新增计划配置</button>
            </div>
            <div class="record-table">
                <nz-table #basicTable [nzData]="listOfData" nzSize="middle"  [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzPageSize]="5">
                    <thead>
                        <tr>
                            <th>计划名称</th>
                            <th>执行周期</th>
                            <th>每次执行次数</th>
                            <th>执行时间</th>
                            <th>是否默认</th>
                            <th nzAlign="center">计划下发</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of basicTable.data">
                            <td>{{ data.planName }}</td>
                            <td>{{ data.circle }}</td>
                            <td>{{ data.times }}</td>
                            <td>{{ data.run_time.join("，") }}</td>
                            <td>{{ data.isDefault ?'是':'否'}}</td>
                            <td class='option-td' nzAlign="center">
                                <button nz-button nzType="primary">全站下发</button>
                                <button nz-button nzType="primary" (click)="isVisible_down = true">指定下发</button>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
        <nz-modal [(nzVisible)]="isVisible" nzTitle="新增巡检计划配置" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="960px">
            <ng-container *nzModalContent>
                <form nzLayout="inline" [formGroup]='inspection_form' class='inspection-mgmt-form'>
                    <nz-form-item>
                        <nz-form-label>计划名称</nz-form-label>
                        <nz-form-control><input  nz-input formControlName='planName' placeholder="给目标起个名字" [width]="240"/></nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label>巡检周期</nz-form-label>
                        <nz-form-control><input  nz-input formControlName='circle' placeholder="请选择" /></nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label>巡检次数</nz-form-label>
                        <nz-form-control><nz-input-number formControlName='times' [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number></nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label>选择时间</nz-form-label>
                        <nz-form-control><nz-time-picker formControlName='time'></nz-time-picker> </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label>是否默认</nz-form-label>
                        <nz-form-control>
                            <nz-radio-group  formControlName="isDefault">
                                <label nz-radio nzValue="1">是</label>
                                <label nz-radio nzValue="0">否</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                </form>
            </ng-container>
        </nz-modal>
        <nz-modal [(nzVisible)]="isVisible_down" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel_down()" (nzOnOk)="handleOk_down()">
            <ng-template #modalTitle>重点线路检查<span id="sf">是否立即下发</span> </ng-template>
            <ng-container *nzModalContent>
                <p>立即下发，站点将马上进行巡检，请确认！</p>
                <div>
                <span>选择站点：</span> 
                    <nz-select  nzPlaceHolder="请选择"  [ngModel]='down_select_val'>
                        <nz-option nzLabel="一号线" nzValue="1"></nz-option>
                        <nz-option nzLabel="二号线" nzValue="2"></nz-option>
                        <nz-option nzLabel="三号线" nzValue="3"></nz-option>
                    </nz-select>
                </div>
            </ng-container>
        </nz-modal>
        <nz-modal [(nzVisible)]="isVisible_manual" [nzFooter]="manualFooter" nzTitle="重点线路检查手动巡检" (nzOnCancel)="handleCancel_manual()" nzWidth="960px">
            <ng-container *nzModalContent>
                <div class="step-inspection">
                    <div class="step-inspection-left">
                        <nz-steps [nzCurrent]="current_step" nzDirection="vertical">
                            <nz-step nzTitle="一号摄像头"></nz-step>
                            <nz-step nzTitle="二号摄像头" ></nz-step>
                            <nz-step nzTitle="三号摄像头"></nz-step>
                        </nz-steps>
                    </div>
                    
                    <div class="step-inspection-right">
                        <div class="step-video">

                        </div>
                    </div>
                </div>
                
            </ng-container>
            <ng-template #manualFooter>
                <div [style]="{textAlign:'center'}">
                    <button nz-button (click)="handleOk_manua()">结束当前巡检</button>
                </div>
            </ng-template>
            
        </nz-modal>
            
    `
})

export class InspectionMgmtComponent implements OnInit {
    isVisible: boolean = false;
    isVisible_down: boolean = false
    isVisible_manual: boolean = false
    input_val: string = "";
    current_step: number = 1;
    inspection_form !: FormGroup;
    down_select_val = "1";

    handleCancel(): void {
        this.isVisible = false
    }
    handleCancel_down(): void {
        this.isVisible_down = false
    }
    handleCancel_manual(): void {
        this.isVisible_manual = false
    }
    handleOk(): void {
        this.isVisible = false
    }
    handleOk_down(): void {
        this.isVisible_down = false
        this.isVisible_manual = true
    }
    handleOk_manua(): void {
        // this.isVisible_manual = false
        this.current_step = this.current_step + 1;
        if(this.current_step>2){
            this.current_step = 1
        }
    }

    listOfData = []
    mock_data = [
        {
            key: "0",
            planName: "每日例行检查",
            circle: "每日",
            times: 3,
            run_time: ["09: 00", "14: 00", "18: 00"],
            isDefault: false
        },
        {
            key: "1",
            planName: "重点线路检查",
            circle: "每周",
            times: 3,
            run_time: ["09: 00", "14: 00", "18: 00"],
            isDefault: false
        },
        {
            key: "2",
            planName: "默认",
            circle: "每月1号",
            times: 2,
            run_time: ["15: 00", "19: 00"],
            isDefault: true
        },
        {
            key: "3",
            planName: "简单检查",
            circle: "每日",
            times: 1,
            run_time: ["17: 00"],
            isDefault: false
        }
    ]
    ngOnInit(): void {
        this.inspection_form = this.fb.group({
            isDefault: ["1"],
            planName: [null],
            circle: [null],
            times: [null],
            time: [null],
        })

        for (let i = 0; i < 3; i++) {
            this.listOfData = this.listOfData.concat(this.mock_data)
        }
    }

    constructor(private fb: FormBuilder) { }
}